<template>
	<view class="big-box">
		<view class="box">
			<view class="content">
				<text class="title">{{ item.notifyTitle }}</text>
				<text class="time">{{ item.createdTime }}</text>
				<view class="notice-content-box" v-if="type == 'user'">
					<text class="notice-content">{{ item.messageContent || '' }}</text>
				</view>
				<view v-else class="notice-content-box"><rich-text :nodes="item.notifyContent" class="notice-content"></rich-text></view>
			</view>
		</view>
	</view>
</template>
<script>
import { notifyRead, userMessageRead } from '@/service/notify.js';
export default {
	data() {
		return {
			item: {},
			type: ''
		};
	},
	onLoad({ type = 'system' }) {
		this.type = type;
		this.item = this.$store.state.content;
		if (this.item.readFlag !== 'y') {
			if (type == 'system') {
				notifyRead({ id: this.item.id });
			} else {
				userMessageRead({ id: this.item.id });
			}
		}
	},
	methods: {}
};
</script>

<style scoped lang="scss">
view {
	display: flex;
}
.big-box {
	flex-direction: column;
	width: 750upx;
	height: 100vh;
	.box {
		width: 750upx;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		.content {
			flex-direction: column;
			width: 690upx;
			align-items: center;
			.title {
				margin-top: 40upx;
				color: #323437;
				font-size: 40upx;
				font-weight: 500;
			}
			.time {
				margin: 20upx 0 30upx 0;
				color: #a9b5c2;
				font-size: 26upx;
			}
			.notice-content-box {
				width: 100%;

				.notice-content {
					text-align: left;
					color: #323437;
					font-size: 30upx;
					line-height: 60upx;
				}
			}
			.list-box {
				margin-top: 40upx;
				width: 690upx;
				flex-direction: column;
				align-items: center;
				.item {
					margin-bottom: 50upx;
					width: 690upx;
					justify-content: space-between;
					align-items: center;
					text {
						color: #323437;
						font-size: 30upx;
					}
					.state {
						color: #a9b5c2;
					}
				}
			}
		}
		.go-look {
			width: 750upx;
			height: 110upx;
			background-color: #3291f9;
			justify-content: center;
			align-items: center;
			text {
				color: #ffffff;
				font-size: 36upx;
			}
		}
	}
}
.detail {
	margin-top: 30upx;
	width: 690upx;
	margin-left: 30upx;
	flex-direction: column;
	align-items: center;
}
.detail-item {
	width: 100%;
}
.detail-item text {
	font-size: 28upx;
	line-height: 44upx;
}
.detail-item .name {
	color: #323437;
}
.detail-item .desc {
	color: #a9b5c2;
}
</style>
